<template>
  <div id="factorSortsMore">
    <mt-header fixed title="万能选股器" v-if="isHeader">
      <mt-button icon="back" slot="left" @click="goBack"></mt-button>
    </mt-header>
    <!--<div v-if="loading" style="z-index: 9999;position: absolute;background: rgba(0,0,0,0.3);width: 100%;height: 100%">-->
      <!--<vue-loading type="spiningDubbles" color="#26a2ff" :size="{ width: '50px', height: '50px' }" style="position: absolute;top: 50%;left: 50%;margin-left: -25px;margin-top: -25px;"></vue-loading>-->
    <!--</div>-->

    <div class="sort-cont" :class="isHeader?'isHeader':''" >
      <div class="pick-search" v-if="!isHeader" @click="goSearch">
        <div class="pick-search-inner">
          <i class="mintui mintui-search pick-search-icon"></i>
          <input ref="input" readonly type="search" placeholder="搜索因子" class="pick-search-input">
        </div>
      </div>
      <div class="sort-select">
        <div class="">
          <div class="s-factor sel_bg" v-for="s in selectFactorsFunc">
            {{s.factor_name}}
            <span class="icon-close" @click="selectFactor(s)">
              <i class="fa fa-times" aria-hidden="true"></i>
            </span>
          </div>
        </div>
        <div class="sort-label" v-if="selectFactors.length<=0">
          <p>还没有筛选条件</p>
          <p>请点击下列因子标签，进行筛选</p>
        </div>
        <span class="icon-del" @click="clearFactor">
          <i class="fa fa-trash-o" aria-hidden="true"></i>
        </span>
      </div>
      <div class="sort-condition">
        <my-collapse open="open" :count="count">
          <my-collapse-item :title="d.title" :subOpen="subOpen" :open="type===d.type" v-for="(d,index) in sortFactors"
                            :key="index">
            <div class="s-factor" :class="item.isSelect?'sel_bg':'org_bg'" v-for="item in d.data"
                 @click="selectFactor(item)">
              {{item.factor_name}}
            </div>
            <div class="s-more" @click="goToSearch(d)">
              <span>更多<i class="fa fa-angle-double-right" aria-hidden="true"></i></span>
            </div>
          </my-collapse-item>
          <div class="my-collapse-item-open" @click="moreAllSort" v-text="!subOpen?'更多因子':'收起因子'"></div>
        </my-collapse>
      </div>
      <div class="sort-stock" id="sort-tab">
        <div class="sort-stock-tab" :class="barFixed == true ? 'isFixed' :''">
          <div class="sort-stock-tab-item" v-for="(t, index) in stockResultTitle" :key="index" @click="stockOrderBy(t)">
            <div class="sort-stock-tab-item-a">
              {{t.name}}
              <span class="sort-stock-tab-item-b" v-show="t.isHide">
                  <i class="fa fa-sort-asc" :class="stockResultSort==='asc'?'up':''" style="position: absolute"
                     aria-hidden="true"></i>
                  <i class="fa fa-sort-desc" :class="stockResultSort==='desc'?'down':''" style="position: absolute"
                     aria-hidden="true"></i>
              </span>
            </div>
          </div>
        </div>
        <div class="sort-stock-list" :style="{'-webkit-overflow-scrolling': scrollMode}">
          <!--<vue-loading v-if="loading1" type="bubbles" color="#26a2ff" :size="{ width: '40px', height: '40px' }" style="position: relative;height: 100%"></vue-loading>-->
          <div class="sort-stock-list-item" v-for="(item, index) in stockResultOrderBy" v-model="stockResult"
               :key="index" @click="goToStockQuote(item)">
            <div class="">
              <p>{{item.stock_name}}</p>
              <p>{{item.stock_code}}</p>
            </div>
            <div :class="(item.zd)>0?'bg_red':item.zd==0?'bg_org':'bg_green'">
              {{item.last_price ? (Number(item.last_price)).toFixed(2) : '--'}}
            </div>
            <div :class="(item.zd)>0?'bg_red':item.zd==0?'bg_org':'bg_green'">
              {{item.fd ? item.fd : '--'}}
            </div>
            <div>
              {{item.pe && item.pe > 0 ? item.pe : '--'}}
            </div>
            <div class="">
              <p>{{item.industries ? item.industries : '--'}}</p>
            </div>
          </div>
          <div class="sort-stock-list-item add-more" v-if="isText" style="color: #666666">
            暂无选股结果，换个因子叠加试试
          </div>
          <div class="sort-stock-list-item add-more" v-if="allLoaded" @click="loadBottom">
            加载更多
          </div>
        </div>
      </div>
    </div>
    <div class="footer">
      <div class="footer-wrapper">
        <!--<div class="add-stock" @click="goToAddStock">-->
        <!--添加自选-->
        <!--</div>-->
        <div class="save-strategy" @click="saveStratrgy">保存策略</div>
      </div>
      <b-msgbox :isSaveStr="isSaveStr" @toggleStrategy="toggleStrategy()"></b-msgbox>
    </div>
  </div>
</template>

<script>
  import _ from 'lodash'
  import REQUEST from './../services/test'
  import {Toast} from 'mint-ui'
  import BMsgbox from './../components/bMsgbox/bMsgbox'
  import vueLoading from 'vue-loading-template'

  export default {
    components: {BMsgbox, vueLoading},
    name: 'factorSortsMore',
    data() {
      return {
        loading: true,
        loading1: false,
        barFixed: false,
        isHeader: false,
        open: true,
        subOpen: false,
        value: '',
        count: 0,
        stockPage: 0,
        stockCount: 10,
        stockResult: [],
        stockResultTitle: [
          {id: 0, name: '名称代码', isHide: false},
          {id: 1, name: '当前价(元)', type: 'last_price_n', sortStatus: true, isHide: false},
          {id: 2, name: '涨跌幅', type: 'fd_n', sortStatus: true, isHide: false},
          {id: 3, name: '市盈率', type: 'pe_n', sortStatus: true, isHide: false},
          {id: 4, name: '所属行业', isHide: false}
        ],
        stockResultType: '',
        stockResultSort: '',
        allLoaded: false,
        isText: false,
        totalpage: 0,
        scrollMode: 'auto',
        type: this.$route.query.type,
        show: false,
        selectFactors: [],
        tech: [],
        concept: [],
        district: [],
        industry: [],
        style: [],
        finance: [],
        isSaveStr: false,
        sortFactors: [
          {title: '概念类', type: 'concept', data: []},
          {title: '技术类', type: 'tech', data: []},
          {title: '财务类', type: 'finance', data: []},
          {title: '行业类', type: 'industry', data: []},
          {title: '风格类', type: 'style', data: []},
          {title: '地域类', type: 'district', data: []}
        ],
        isTest: Number
      }
    },
    beforeRouteLeave (to, from, next) {
      window.removeEventListener('scroll', this.handleScroll, false)
      next()
    },
    beforeCreate () {
      this.loading = true
    },
    created() {
      this.$store.commit('getUrlParams')
      this.$store.dispatch('isAllFactors')
      this.isHeader = this.$store.state.isHeader
      let _params = this.$route.query
      if (_params.type) {
        this.sortFactors.forEach((v, k) => {
          if (_params.type === v.type) {
            var a = this.sortFactors.splice(k, 1)
            this.sortFactors.unshift(a[0])
          }
        })
      }

      this.$nextTick(function () {
        window.addEventListener('scroll', this.handleScroll, false)
      })
    },
    mounted() {
      this.initSortFactors()
      window.scrollTo(0, 0)
    },
    updated () {
//      this.loading = false
    },
    watch: {},
    methods: {
      // 排序
      stockOrderBy(t) {
        if (!(t.id === 0 || t.id === 4)) {
          this.stockResultTitle.forEach(function (v) {
            if (v.id === t.id) {
              v.isHide = true
            } else {
              v.isHide = false
            }
          })
          t.sortStatus = !t.sortStatus
          this.stockResultType = t.type
          if (t.sortStatus) {
            this.stockResultSort = 'asc'
          } else {
            this.stockResultSort = 'desc'
          }
        }
      },
      // 滚动固定导航
      handleScroll() {
        let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
        let offsetTop = document.querySelector('#sort-tab').offsetTop
        if (scrollTop > offsetTop) {
          this.barFixed = true
        } else {
          this.barFixed = false
        }
      },
      toggleStrategy() {
        this.stockResult = []
        this.stockPage = 0
      },
      // 返回
      goBack() {
        // history.back()
        // this.$router.go(-1)
        if (this.$route.query.back === 0) {
          this.$router.replace('/pickStock')
        } else {
          this.$router.go(-1)
        }
      },
      goSearch() {
        this.$router.push('/search')
      },
      // 添加自选
      goToAddStock() {
        let arrCode = []
        this.selectFactors.forEach(v => {
          arrCode.push(v.factor_id)
        })
        let strCode = arrCode.join(',')
        this.$router.push({path: '/addStock', query: {factors: strCode}})
      },
      initSortFactors1() {
        let _allFactors = this.$store.state.allFactors
        this.sortFactors.forEach((v, k) => {
          switch (v.type) {
            case 'concept':
              v.data = _allFactors.filter((v, k) => {
                return v.factor_type === 'concept'
              }).filter((v, k) => {
                return k < 8
              })
              break
            case 'tech':
              v.data = _allFactors.filter((v, k) => {
                return v.factor_type === 'tech'
              }).filter((v, k) => {
                return k < 8
              })
              break
            case 'finance':
              v.data = _allFactors.filter((v, k) => {
                return v.factor_type === 'finance'
              }).filter((v, k) => {
                return k < 8
              })
              break
            case 'industry':
              v.data = _allFactors.filter((v, k) => {
                return v.factor_type.indexOf('industry') > -1
              }).filter((v, k) => {
                return k < 8
              })
              break
            case 'style':
              v.data = _allFactors.filter((v, k) => {
                return v.factor_type === 'style'
              }).filter((v, k) => {
                return k < 8
              })
              break
            case 'district':
              v.data = _allFactors.filter((v, k) => {
                return v.factor_type === 'district' && !v.parent_id
              }).filter((v, k) => {
                return k < 8
              })
              break
          }
        })
      },
      initSortFactors() {
        let _self = this
        let _allFactors = this.$store.state.allFactors
        REQUEST.getTopFactor().then(res => {
//           console.log('重新请求--------getTopFactor', res)
          let _ids = []
          res.forEach(v => {
            _ids.push(v.factor_id)
          })
          let _sortFactors = _allFactors.filter((v, k) => {
            return _ids.join('|').indexOf(v.factor_id) > -1
          })
          _self.sortFactors.forEach((v, k) => {
            switch (v.type) {
              case 'concept':
                v.data = _sortFactors.filter((v, k) => {
                  return v.factor_type === 'concept'
                }).filter((v, k) => {
                  return k < 8
                })
                break
              case 'tech':
                v.data = _sortFactors.filter((v, k) => {
                  return v.factor_type === 'tech'
                }).filter((v, k) => {
                  return k < 8
                })
                break
              case 'finance':
                v.data = _sortFactors.filter((v, k) => {
                  return v.factor_type === 'finance'
                }).filter((v, k) => {
                  return k < 8
                })
                break
              case 'industry':
                v.data = _sortFactors.filter((v, k) => {
                  return v.factor_type.indexOf('industry') > -1
                }).filter((v, k) => {
                  return k < 8
                })
                break
              case 'style':
                v.data = _sortFactors.filter((v, k) => {
                  return v.factor_type === 'style'
                }).filter((v, k) => {
                  return k < 8
                })
                break
              case 'district':
                v.data = _sortFactors.filter((v, k) => {
                  return v.factor_type === 'district' && !v.parent_id
                }).filter((v, k) => {
                  return k < 8
                })
                break
            }
          })
          _self.loading = false
        }).catch(err => {
          console.info(err)
          _self.loading = false
        })
      },
      goToSearch(_d) {
        this.$router.push({path: '/factorSortsSearch', query: {type: _d.type}})
      },
      // 选中或未选中因子状态
      selectFactor(_item) {
        _item.isSelect = !_item.isSelect
        this.stockResult = []
        this.stockPage = 0
        if (_item.isSelect) {
          if (_item.factor_type === 'district') {
            this.$store.state.selectFactors.forEach(v => {
              if (v.factor_type.indexOf('district') > -1) {
                v.isSelect = false
                this.delFactor(v)
              }
            })
          }
          if (_item.factor_type.indexOf('industry') > -1) {
            this.$store.state.selectFactors.forEach(v => {
              if (v.factor_type.indexOf('industry') > -1) {
                v.isSelect = false
                this.delFactor(v)
              }
            })
          }
          this.addFactor(_item)
        } else {
          this.delFactor(_item)
        }
      },
      // 添加选中因子
      addFactor(_item) {
        this.$store.commit('pushSelectFactor', _item)
      },
      // 删除选中因子
      delFactor(_item) {
        this.$store.commit('removeSelectFactor', _item)
      },
      // 清除所有选中因子
      clearFactor() {
        this.$store.commit('clearSelectFactor')
        this.selectFactors = []
        this.stockResult = []
        this.stockPage = 0
      },
      // 展开或收起因子
      moreAllSort() {
        this.subOpen = !this.subOpen
      },
      // 获取股票列表
      getStockList() {
        let _self = this
        let arrCode = []
        let _selectFactors = _self.$store.state.selectFactors
        this.selectFactors.forEach(v => {
          arrCode.push(v.factor_id)
        })
        _self.loading1 = true
        let strCode = arrCode.join(',')
        REQUEST.getStockCodes(strCode, _self.stockPage, _self.stockCount).then((res) => {
          // console.log('stock', res)
          if (!Array.isArray(res.data)) {
            _self.count = 0
          } else {
            _self.count = res.length
            _self.$nextTick(function () {
              _self.scrollMode = 'touch'
              _self.isTest = res.length / _self.stockCount - 1
              if (_self.stockPage >= _self.isTest) {
                _self.allLoaded = false
              } else {
                _self.allLoaded = true
              }
            })
          }
          if (_selectFactors.length > 0) {
            if (_self.count !== 0) {
              _self.isText = false
            } else {
              _self.isText = true
            }
          } else {
            _self.isText = false
          }
          return res.data
        }).then((res) => {
          if (res.length > 0) {
            let _ids = []
            res.forEach(v => {
              _ids.push(v.stock_code)
            })
            let _ids1 = _ids.join(',')
            REQUEST.getNewStockQuote(_ids1, _ids.length).then((req) => {
              let x = []
              req.forEach(v => {
                v.last_price_n = Number(v.last_price)
                v.fd_n = Number(v.fd.split('%')[0])
                v.pe_n = Number(v.pe)
                if (v.stock_code.charAt(0) === '6') {
                  v.market = 'SH'
                } else {
                  v.market = 'SZ'
                }
                x[v.stock_code + '.' + v.market] = v
              })
              res.forEach(v => x[v.stock_code] && (x[v.stock_code].industries = v.industries))
              x = null
              if (!Array.isArray(req)) {
                _self.stockResult = []

              } else {
                // _self.stockResult = _self.stockResult.concat(req)
                _self.stockResult = Array.from(_self.stockResult.concat(req))
                _self.loading1 = false
              }
            }).catch(err => {
              console.info(err)
              _self.loading1 = false
            })
          } else {
            _self.loading1 = false
            // _self.count = 0
            // _self.stockResult = []
          }
        })
      },
      // 获取股票行情
      goToStockQuote(_item) {
        let _code = ''
        if (_item.market && _item.market === 'SH') {
          _code = _item.stock_code + '.SS'
        } else {
          _code = _item.stock_code + '.' + _item.market
        }
        egos.callquotation(_code)
      },
      // 加载更多
      loadBottom() {
        this.stockPage++
        // this.getStockList()
      },
      // 保存策略
      saveStratrgy() {
        let _params = this.$route.query
        let selectFactors = this.$store.state.selectFactors
        if (_params.from && _params.from === 'myStrategyMore') {
          this.goToSortsFactors(_params)
        } else {
          if (selectFactors.length > 0) {
            this.isSaveStr = !this.isSaveStr
          } else {
            Toast({
              message: '未选择因子',
              position: 'bottom',
              duration: 3000
            })
          }
        }

      },
      // 新建策略
      newStrategy() {
        let selectFactors = this.$store.state.selectFactors
        if (selectFactors.length > 0) {
          this.$router.push('/newStrategyName')
        } else {
          Toast({
            message: '未选择因子',
            position: 'bottom',
            duration: 3000
          })
        }
      },
      // 覆盖已有策略
      goToSortsFactors(s) {
        let userInfo = this.$store.state.userInfo
        let _self = this
        this.$confirm('策略覆盖不可撤销，您确定要覆盖该策略吗?', '', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          center: true
        }).then(() => {
          let selectFactors = _self.$store.state.selectFactors
          let _ids = []
          selectFactors.forEach(v => {
            _ids.push(v.factor_id)
          })
          s.factor_ids = _ids.join(',')
          REQUEST.relMyStrategys(userInfo, s).then(res => {
            if (res) {
              // _self.isOpen = false
              Toast({
                message: '策略更新成功!',
                position: 'bottom',
                duration: 3000
              })
            }
          })
        }).catch(() => {
          // _self.isOpen = false
        })

        // this.$store.commit('clearSelectFactor')
        // let allFactor = this.$store.state.allFactors
        // if (allFactor.length > 0) {
        //   let b = allFactor.filter(v => {
        //     return s.factor_ids.indexOf(v.factor_id) > -1
        //   })
        //   b.forEach(v => {
        //     v.isSelect = true
        //     this.$store.commit('pushSelectFactor', v)
        //   })
        // }
        // this.isOpen = false
        // this.$emit('toggleStrategy')
        // this.$router.replace({path: '/factorSortsMore', query: s})
      }
    },
    computed: {
      selectFactorsFunc() {
        this.selectFactors = this.$store.state.selectFactors
        this.getStockList()
        return this.selectFactors
      },
      stockResultOrderBy() {
        // asc desc
//        console.log(this.stockResultType, this.stockResultSort)
        return _.orderBy(this.stockResult, this.stockResultType, this.stockResultSort)
      }
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
  #factorSortsMore {
    background: #f8f8f8;
    [v-cloak] {
      display: none;
    }
    .mint-header.is-fixed {
      background-color: #0f1316;
    }
    .sort-cont.isHeader {
      margin-top: 1.25rem !important;
    }
    .sort-cont {
      /*margin-top: 1.25rem;*/
      font-size: 0.32rem;
      .originColor {
        background: #f2f2f2 !important;
        color: #4f4f4f !important;
      }
      .selectColor {
        background: #26a2ff !important;
        color: #ffffff !important;;
      }
      .s-factor {
        width: auto;
        height: 0.6666667rem;
        line-height: 0.6666667rem;
        padding: 0px 0.1066667rem;
        background: #f2f2f2;
        float: left;
        color: #4f4f4f;
        margin: 0.1333333rem 0.1066667rem;
        border-radius: 0.1066667rem;
        position: relative;
      }
      .icon-close {
        position: absolute;
        right: -0.16rem;
        top: -0.32rem;
        height: 0.32rem;
        width: 0.32rem;
        i {
          background: #1296db;
          color: #ffffff;
          border-radius: 50%;
          height: 0.32rem;
          width: 0.32rem;
        }
      }
      .org_bg {
        border: 1px solid #f2f2f2;
        color: #000000;
        background: #f2f2f2;
      }
      .sel_bg {
        border: 1px solid #1296db;
        color: #1296db;
        background: #ffffff;
      }
      .s-more {
        width: auto;
        height: 0.6666667rem;
        line-height: 0.6666667rem;
        padding: 0px 0.1066667rem;
        float: right;
        color: #1296db;
        margin: 0.1333333rem 0.1066667rem;
        border-radius: 0.1066667rem;
      }

      .pick-search {
        position: relative;
        -webkit-box-align: center;
        -webkit-align-items: center;
        -moz-align-items: center;
        -ms-align-items: center;
        -o-align-items: center;
        align-items: center;

        background-color: #f2f2f2;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        display: box;
        display: -webkit-box;
        display: -moz-box;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
        padding: 0.16rem 0.16rem;
        z-index: 1;
        .pick-search-inner {
          -webkit-box-align: center;
          -webkit-align-items: center;
          -moz-align-items: center;
          -ms-align-items: center;
          -o-align-items: center;
          align-items: center;
          background-color: #fff;
          border-radius: 0.0533333rem;
          display: box;
          display: -webkit-box;
          display: -moz-box;
          display: -ms-flexbox;
          display: -webkit-flex;
          display: flex;
          -webkit-box-flex: 1;
          -moz-box-flex: 1;
          /*width: 20%;*/
          -webkit-flex: 1;
          -ms-flex: 1;
          flex: 1;
          height: 0.7466667rem;
          padding: 0.1066667rem 0.16rem;
          .pick-search-icon {
            font-family: "mintui" !important;
            font-size: 0.4266667rem;
            font-style: normal;
            -webkit-font-smoothing: antialiased;
            -webkit-text-stroke-width: 0.00533333rem;
          }
          .pick-search-input {
            text-indent: 0.16rem;
            -webkit-appearance: none;
            -moz-appearance: none;
            appearance: none;
            border: 0;
            -webkit-box-sizing: border-box;
            box-sizing: border-box;
            width: 100%;
            height: 100%;
            outline: 0;
          }
        }
      }
      .sort-select {
        min-height: 2.4rem;
        position: relative;
        background: #ffffff;
        padding-top: 0.1066667rem;
        overflow: hidden;
        .sort-label {
          text-align: center;
          min-height: 2.4rem;
          font-size: 0.4rem;
        }
        .icon-del {
          position: absolute;
          right: 0.2666667rem;
          top: 0.2133333rem;
          i {
            font-size: 0.4533333rem;
            color: #cccccc;
          }
        }
      }

      .sort-condition {
        .sort-result-count {
          text-align: left;
          margin-left: 0.4rem;
        }
        .my-collapse-item-open {
          height: 1.0666667rem;
          line-height: 1.0666667rem;
          color: #1296db;
          background: #f8f8f8;
        }
      }
      #sort-tab {
        .isFixed {
          position: fixed;
          background-color: #Fff;
          width: 100%;
          top: 0;
          z-index: 999;
        }
      }
      .sort-stock {
        background: #ffffff !important;
        .bg_red {
          color: red !important;
        }
        .bg_green {
          color: green !important;
        }
        .bg_org {
          color: #000000 !important;
        }
        .sort-stock-tab {
          height: 1.0666667rem;
          /*line-height: 1.0666667rem;*/
          display: box;
          display: -webkit-box;
          display: -moz-box;
          display: -ms-flexbox;
          display: -webkit-flex;
          display: flex;
          -webkit-box-pack: center;
          -webkit-justify-content: center;
          -moz-justify-content: center;
          -ms-justify-content: center;
          -o-justify-content: center;
          -webkit-box-align: center;
          -webkit-align-items: center;
          -moz-align-items: center;
          -ms-align-items: center;
          -o-align-items: center;
          align-items: center;
          -webkit-box-orient: horizontal;
          -webkit-flex-direction: row;
          -moz-flex-direction: row;
          -ms-flex-direction: row;
          -o-flex-direction: row;
          flex-direction: row;
          font-size: 0.3466667rem;
          border-bottom: 1px solid #e5e5e5;
          background: #ffffff;
          .sort-stock-tab-item {
            -webkit-box-flex: 1;
            -moz-box-flex: 1;
            /*width: 20%;*/
            -webkit-flex: 1;
            -ms-flex: 1;
            flex: 1;
            color: #a0a0a0;
            .sort-stock-tab-item-a {
              position: relative;
              font-size: 0.3733333rem;
              text-indent: -1px;
              .sort-stock-tab-item-b {
                position: absolute;
                top: 50%;
                margin-top: -0.14rem;
                font-size: 0.32rem;
                text-indent: 1px;
                .up {
                  color: #26a2ff;
                }
                .down {
                  color: #26a2ff;
                }
              }
            }
          }
        }
        .sort-stock-list {
          margin-bottom: 0.96rem;
          .sort-stock-list-item {
            height: 1.0666667rem;
            /*line-height: 1.0666667rem;*/
            display: box;
            display: -webkit-box;
            display: -moz-box;
            display: -ms-flexbox;
            display: -webkit-flex;
            display: flex;
            -webkit-box-pack: center;
            -webkit-justify-content: center;
            -moz-justify-content: center;
            -ms-justify-content: center;
            -o-justify-content: center;
            -webkit-box-align: center;
            -webkit-align-items: center;
            -moz-align-items: center;
            -ms-align-items: center;
            -o-align-items: center;
            align-items: center;
            -webkit-box-orient: horizontal;
            -webkit-flex-direction: row;
            -moz-flex-direction: row;
            -ms-flex-direction: row;
            -o-flex-direction: row;
            flex-direction: row;
            background: #ffffff;
            border-bottom: 1px solid #e5e5e5;
            div {
              -webkit-box-flex: 1;
              -moz-box-flex: 1;
              /*width: 20%;*/
              -webkit-flex: 1;
              -ms-flex: 1;
              flex: 1;
              color: #000000;
              &:nth-of-type(1) {
                display: box;
                display: -webkit-box;
                display: -moz-box;
                display: -ms-flexbox;
                display: -webkit-flex;
                display: flex;
                -webkit-box-orient: vertical;
                -webkit-flex-direction: column;
                -moz-flex-direction: column;
                -ms-flex-direction: column;
                -o-flex-direction: column;
                flex-direction: column;
                p {
                  -webkit-box-flex: 1;
                  -moz-box-flex: 1;
                  /*width: 20%;*/
                  -webkit-flex: 1;
                  -ms-flex: 1;
                  flex: 1;
                  &:nth-of-type(2) {
                    color: #a0a0a0;
                  }
                }
              }
            }
          }
          .add-more {
            background: #f8f8f8;
            color: #1296db;
          }
        }
      }
    }
    .footer {
      position: fixed;
      bottom: 0;
      border-top: 1px solid #e5e5e5;
      width: 100%;
      background: #ffffff;
      .footer-wrapper {
        display: box;
        display: -webkit-box;
        display: -moz-box;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
        /*justify-content: center;*/
        /*align-items: center;*/
        height: 0.96rem;
        line-height: 0.96rem;
        .add-stock {
          -webkit-box-flex: 1;
          -moz-box-flex: 1;
          /*width: 20%;*/
          -webkit-flex: 1;
          -ms-flex: 1;
          flex: 1;
          border-right: 1px solid #e5e5e5;
        }
        .save-strategy {
          -webkit-box-flex: 1;
          -moz-box-flex: 1;
          /*width: 20%;*/
          -webkit-flex: 1;
          -ms-flex: 1;
          flex: 1;
        }
      }

    }

  }
</style>
